/*
 * @Author: H
 * @Last Modified by: H
 * Description:
    1.表单展示组件
    2.rowType: 表单是否栅格布局 false => 否; true => 是
    3.colSpan: 栅格布局col占比
    4.formStyle: 表单样式 true => 表单垂直排列; false => 表单水平排列
    5.dicType: 表单项配置动态字典类型值
    6.dicProp: 表单项配置动态字典的枚举字段
    7.type: 表单项输入框类型 input => 输入框; select => 下拉框; datePicker => 日期时间选择框;slot => 表单项插槽
    8.selectList: 下拉框字典选项集合
    9.dateType: 表单项日期时间选择框的类型
    10.format: 表单项时间选择框的展示值样式
    11.valueFormat: 表单项时间选择框的绑定值
    12.popperAppend: 是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false
 */
<template>
  <div ref="myFormRef" class="myForm">
    <el-form
      ref="queryFormRef"
      :inline="formOption.inline"
      :model="value"
      class="el-form pms-form"
      :class="[lineHeight == 38 ? 'lineHeight38' : 'lineHeight28']"
      :size="formOption.size"
      :disabled="formOption.disabled"
      :label-width="formOption.labelWidth"
    >
      <el-row type="" :gutter="24">
        <el-col v-for="(item, index) in formOption.itemData" :key="item + index" :span="item.colSpan" style="margin-left: 0px;margin-right: 0px;">
          <el-form-item :class="item.class || ''" :label="item.label" :prop="item.prop" :rules="item.rule">
            <template v-if="item.type === 'slot'">
              <slot :name="item.prop" />
            </template>
            <el-input
              v-else-if="item.type === 'input'"
              v-model="value[item.prop]"
              :clearable="item.clearable"
              :size="item.size"
              :disabled="item.disabled"
              :style="{ width: item.width }"
              :placeholder="item.placeholder"
              @change="handleOnEvent(item.prop, value[item.prop])"
            />
            <el-select
              v-else-if="item.type === 'select'"
              v-model="value[item.prop]"
              :size="item.size"
              :multiple="item.multiple"
              :collapse-tags="item.collapseTags"
              :multiple-limit="item.multipleLimit"
              :popper-append-to-body="item.popperAppend"
              :clearable="item.clearable"
              :style="{ width: item.width }"
              :disabled="item.disabled"
              :placeholder="item.placeholder"
              @change="handleOnEvent(item.prop, value[item.prop])"
            >
              <el-option
                v-for="it in selectList[item.dicType]"
                :key="it[item.dicProp.value]"
                :label="it[item.dicProp.label]"
                :value="it[item.dicProp.value]"
              />
            </el-select>
            <custom-select
              v-else-if="item.type === 'mulSelect'"
              v-model="value[item.prop]"
              :selected.sync="item.value"
              :options="selectList[item.dicType]"
              :disabled="item.disabled"
              @change="handleOnEvent(item.prop, value[item.prop])"
            />
            <el-date-picker
              v-else-if="item.type === 'datePicker'"
              v-model="value[item.prop]"
              :placeholder="item.placeholder"
              :value-format="item.valueFormat"
              :format="item.format"
              :type="item.dateType"
              :disabled="item.disabled"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :style="{ width: item.width }"
              @change="handleOnEvent(item.prop, value[item.prop])"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import CustomSelect from '@/components/basic/customSelect.vue'
export default {
    name: 'MyForm',
    components: {
        CustomSelect
    },
    props: {
        // 表单配置项数据
        formOption: {
            type: Object,
            default: () => ({})
        },
        // 表单项的值集合
        value: {
            type: Object,
            default: () => ({})
        },
        // 下拉框字典选项集
        selectList: {
            type: Object,
            default: () => ({})
        },
        lineHeight: {
            type: Number,
            default: 28
        }
    },
    created() {
        this.initData(this.formOption)
    },
    methods: {
        // 事件
        handleOnEvent(prop, row) {
            this.$emit('handleEvent', prop, row)
        },
        // 初始化表单默认值
        initData(dataOption) {
            dataOption.itemData.forEach(item => {
                this.$set(this.value, item.prop, item.value ?? '')
            })
           console.log(this.value, 'dataOptiondataOption')
        },
        // 重置表单
        reset() {
            this.$refs.queryFormRef.resetFields()
        }
    }
}
</script>

<style lang="scss" scoped>
.myForm {
    width: 100%;
    margin-right: 40px;
}

.el-form-item {
    width: 100%;
}
.query-form {
    font-size: small;
    .el-form-item {
        width: 100%;
        height: 50px;

        .el-form-item__content {
            width: 68%;
            height: 50%;
        }

        .el-input__inner {
            height: 32px !important;
        }

        .el-form-item__label {
            // width: 20%;
            padding: 0 4px 0 0;
            font-size: 14px;
            margin-right: 20px;
        }
    }
}
::v-deep .el-row{
  margin-left: 0px !important;;
  margin-right: 0px !important;;
}
::v-deep  .el-col-6 {
  padding-left: 0px !important;;
  padding-right: 0px !important;;
}
</style>

<style>
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover {
    background-color: #EB4B4B;
}
.lineHeight28 {
  line-height: 28px;
}
.lineHeight38 {
  line-height: 38px;
}
</style>
